<template>
    <div class="count">
        <div class="topTit f f-a-c f-j-b">
            <div class="left f f-a-c">
                <img src="/src/status/img/logo.png" class="logo" alt="">
                <span>H.S.国际问题研究平台</span>
            </div>
            <div class="right">
                <img @click="setting" src="/src/status/img/geng.png" class="myStat" alt="">
            </div>
        </div>
        <div class="body">
            <div class="tit">修改密码</div>
            <!-- 原密码 -->
            <div class="oldPassword">
                <div class="top f f-a-c">
                    <p class="title">*</p>
                    <div class="padd">原密码</div>
                </div>
                <input type="password" v-model="oldValue" placeholder="请输入旧密码" class="inp" name="" id="">
            </div>
            <div class="oldPassword">
                <div class="top f f-a-c">
                    <p class="title">*</p>
                    <div class="padd">新密码</div>
                </div>
                <input type="password" placeholder="请输入新密码" v-model="newValue" class="inp" name="" id="">
            </div>
            <div class="oldPassword">
                <div class="top f f-a-c">
                    <p class="title">*</p>
                    <div class="padd">确认密码</div>
                </div>
                <input type="password" placeholder="确认新密码" v-model="comNewValue" class="inp" name="" id="">
            </div>
            <div class="btn" @click="comfig">确认</div>
        </div>
    </div>
</template>

<script setup>
import router from '../../router';
import { ref } from 'vue';
import { showToast } from 'vant';
import { changePassword } from '../../api/index'
let oldValue = ref('')//旧密码
let newValue = ref('')//新密码
let comNewValue = ref('')//确认新密码
// 返回首页
const setting = () => {
    router.push('/IndexMove')
}
// 点击确定校验
const comfig = async () => {
    if (!oldValue.value || !newValue.value || !comNewValue.value) {
        showToast('请输入完整信息');
        return
    }
    let n = await changePassword({
        password: oldValue.value,
        newPassword: newValue.value,
        repeatPassword: comNewValue.value
    })
    showToast(n.msg);
}
</script>
<style lang="scss" scoped>
@function pxfn($px) {
    @return calc($px / 3.75) * 1vw;
}

.btn {
    width: 100%;
    height: pxfn(42);
    line-height: pxfn(42);
    background: #32bbea;
    border-radius: pxfn(6);
    margin-top: pxfn(35);
    font-size: pxfn(14);
    font-family: PingFang SC, PingFang SC-500;
    font-weight: 500;
    text-align: center;
    color: #ffffff;
}

.body {
    height: calc(100vh - pxfn(48));
    padding: pxfn(15);

    .oldPassword {
        width: 100%;
        margin-top: pxfn(20);

        .inp {
            width: 100%;
            height: pxfn(40);
            border: pxfn(1) solid #e8eaef;
            border-radius: pxfn(6);
            margin-top: pxfn(10);
            padding-left: pxfn(15);
        }

        .title {
            font-size: pxfn(14);
            font-family: PingFang SC, PingFang SC-400;
            font-weight: 400;
            text-align: LEFT;
            color: #f0251b;
            margin-right: pxfn(8);
        }

        .padd {
            font-size: pxfn(16);
            font-family: PingFang SC, PingFang SC-400;
            font-weight: 500;
            text-align: LEFT;
            color: #1d2129;
        }
    }

    .tit {
        font-size: pxfn(20);
        font-family: PingFang SC, PingFang SC-600;
        font-weight: 600;
        text-align: LEFT;
        color: #1d2129;
    }
}



.count {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    padding-top: pxfn(50);
}

.topTit {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: pxfn(48);
    border: 1px solid #edf3fa;
    padding: pxfn(15);
    z-index: 1;
    font-size: pxfn(14);
    font-weight: 600;

    .logo {
        width: pxfn(27);
        height: pxfn(24);
        margin-right: pxfn(10);
    }

    .myStat {
        width: pxfn(24);
        height: pxfn(24);
    }
}
</style>
